﻿@page "/buttons/toggle-switch-button"

@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample demonstrates the default functionalities of a Switch component. Click the Switch element to toggle between checked and unchecked states.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>Switch</code> is a graphical user interface element that allows you to toggle between checked and unchecked states.</p>
    <p>In this sample, checked state is achieved by using the <a target=""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Checked">Checked</a>
     property, and disabled state is achieved by using the <a target = ""_blank"" class=""code"" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Disabled">Disabled</a> property.</p>
    <p> More information about Blazor Switch component can be found in this <a target = ""_blank"" href="https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started/">documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="container switch-control">
            <div>
                <h4 class="heading">Hotspot & tethering</h4>
            </div>
            <div>
                <label style="padding: 10px 70px 10px 0">USB Tethering</label>
                <SfSwitch @bind-Checked="@isUSB"></SfSwitch>
            </div>
            <div>
                <label style="padding: 10px 24px 10px 0">Portable Wi-Fi hotspot</label>
                <SfSwitch @bind-Checked="@isHotSpot"></SfSwitch>
            </div>
            <div>
                <label style="padding: 10px 40px 10px 0">Bluetooth Tethering</label>
                <SfSwitch Disabled="true" @bind-Checked="@isBluetooth"></SfSwitch>
            </div>
        </div>
    </div>
</div>
@code {
    private bool isUSB = true;
    private bool isHotSpot = false;
    private bool isBluetooth = false;
}
<style>
    /* Switch Styles */
    .content-wrapper {
        margin-top: 47px;
    }

    .switch-control .heading {
        text-indent: 15px;
        padding: 15px 0;
    }

    .switch-control div {
        display: flex;
        align-items: center;
    }

    .switch-control {
        margin: 0 auto;
        width: 275px;
    }

    .switch-control label {
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        user-select: none;
        font-weight: 400;
        font-size: 13px;
    }

    .switch-control .e-disabled {
        pointer-events: none;
    }
</style>
